<template>
  <view class="main">
    <scroll-view :scroll-y="true" class="m-scroll-y" @scrolltolower="scrolltolower">
      <view v-for="(item, index) in coverImgList" :key="index" class="m-item" @click="goDetail(item)">
        <image :src="item.imgs[0]" mode="widthFix" />
        <!-- <view class="m-btn" >涨知识</view> -->
      </view>
      <!-- <uniLoadMore contentText="上拉加载更多" @clickLoadMore="addMore"></uniLoadMore> -->
      <!-- <uni-load-more
        :status="status"
        :icon-size="16"
        :contentText="contentText"
        @clickLoadMore="addMore"
      ></uni-load-more> -->
    </scroll-view>
  </view>
</template>
<script>
// 涨知识列表页
import { getArticles } from '@/api/learn.js';
// import uniLoadMore from '@/components/uni-load-more.vue';
export default {
  components: {
    // uniLoadMore
  },
  data() {
    return {
      coverImgList: [],
      status: 'more',
      contentText: {
        contentdown: '向上滑动加载更多',
        contentrefresh: '加载中',
        contentnomore: '没有更多'
      }
    };
  },

  onLoad() {
    // 获取文章列表 articleType 1视频  2文章
    let queryObj = {
      where: JSON.stringify({
        articleType: 1,
        articleCategory: '涨知识专题',
        articleCategoryRange: 1
      }),
      skip: 0,
      limit: 10,
      nearBy: 'desc'
    };
    this.getArticles_self(queryObj);
  },
  onReachBottom() {
    this.status = 'more';
    this.addMore();
  },
  methods: {
    addMore() {
      this.status = 'loading';
      let skip = this.coverImgList.length;
      let queryObj = {
        where: JSON.stringify({
          articleType: 1,
          articleCategory: '涨知识专题',
          articleCategoryRange: 1
        }),
        skip: skip,
        limit: 5,
        nearBy: 'desc'
      };
      this.getArticles_self(queryObj);
    },
    goDetail(item) {
      this.$wxPromise.navigateTo({
        url: '/pages/learn/detail?id=' + item.id
      });
    },
    getArticles_self(queryObj) {
      getArticles(queryObj).then((res) => {
        // 以下为测试数据
        if (res.code !== 0) {
          uni.showToast({
            title: '获取涨知识失败'
          });
          return;
        }
        let resData = res.data;
        if (resData.length === 0) {
          // 为了效果好看，加一个定时器
          setTimeout(() => {
            this.status = 'moMore';
          }, 300);
        } else {
          this.status = 'more';
          resData.forEach((item) => {
            // 把imgs 转化成数组
            if (item.imgs) {
              item.imgs = item.imgs.split(',');
            } else {
              item.imgs = [];
            }
          });
          this.coverImgList = this.coverImgList.concat(resData);
          // 按照创建时间倒序排列
          this.coverImgList.sort((cur, next) => {
            if (next.createddate && cur.createddate) {
              return (
                new Date(next.createddate.replace(new RegExp(/-/gm), '/')) -
                new Date(cur.createddate.replace(new RegExp(/-/gm), '/'))
              );
            }
            return 0;
          });
        }

        return;
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.main {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
  .m-item {
    margin: auto;
    width: 700rpx;
    border-radius: 24rpx;
    margin-top: 24rpx;
    position: relative;
    overflow: hidden;
    image {
      width: 100%;
      object-fit: contain;
    }
    .m-btn {
      width: 136rpx;
      height: 56rpx;
      line-height: 56rpx;
      background: linear-gradient(186deg, #fe894d 0%, #ef3931 100%);
      text-align: center;
      font-size: 24rpx;
      color: white;
      border-radius: 24rpx;
      position: absolute;
      bottom: 24rpx;
      left: 24rpx;
    }
  }
}
</style>
